<!DOCTYPE html>
<html lang="en">

<head>
	#include("./common/head.htm")
</head>

<body>
	#include("./common/header.htm")
	<div id="mainBody">
		<div class="container">
			<div class="row">
				#include("./common/sidebar.htm")
				<div class="span9" id="showItem">
					<ul class="breadcrumb">
						<li><a href="/view/catalog-main.html">首页</a> <span class="divider">/</span></li>
						<!-- <li><a href="products.html">商品</a> <span class="divider">/</span></li> -->
						<li class="active">商品详情页</li>
					</ul>
					<div class="row">
						<div id="gallery" class="span3">
							<a href="../page/common/themes/images/products/large/f1.jpg"
								title="Fujifilm FinePix S2950 Digital Camera">
								<img :src="imgSrc" style="width:100%" alt="Fujifilm FinePix S2950 Digital Camera" />
							</a>
							<div id="differentview" class="moreOptopm carousel slide">
								<div class="carousel-inner">
									<div class="item active">
										<a href="../page/common/themes/images/products/large/f1.jpg"
											v-for="attr in iteminfo[0].attrList"> <img style="width:29%" :src="attr.src"
												alt="" /></a>
									</div>
									<div class="item">
										<a href="../page/common/themes/images/products/large/f3.jpg"> <img
												style="width:29%"
												src="../page/common/themes/images/products/large/f3.jpg" alt="" /></a>
										<a href="../page/common/themes/images/products/large/f1.jpg"> <img
												style="width:29%"
												src="../page/common/themes/images/products/large/f1.jpg" alt="" /></a>
										<a href="../page/common/themes/images/products/large/f2.jpg"> <img
												style="width:29%"
												src="../page/common/themes/images/products/large/f2.jpg" alt="" /></a>
									</div>
								</div>
								<!--  
			  <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
			  -->
							</div>

							<div class="btn-toolbar">
								<div class="btn-group">
									<span class="btn"><i class="icon-envelope"></i></span>
									<span class="btn"><i class="icon-print"></i></span>
									<span class="btn"><i class="icon-zoom-in"></i></span>
									<span v-if="item.isFavorite === 1" class="btn" @click="unlike()"><i
											class="icon-star"></i></span>
									<span v-else class="btn" @click="like()"><i class="icon-star-empty"></i></span>
									<span class="btn"><i class=" icon-thumbs-up"></i></span>
									<span class="btn"><i class="icon-thumbs-down"></i></span>
								</div>
							</div>
						</div>
						<div class="span6">
							<h3></h3>
							<hr class="soft" />
								<div class="control-group">
									<label class="control-label"><span>{{ (qty * price).toFixed(2) }}元</span></label>
									<div class="controls">
										<input type="number" class="span1" placeholder="Qty." v-model="qty"
											v-bind:max="stock" min="0" />
										<button class="btn btn-large btn-primary pull-right" @click="addToCart()"> Add
											to cart <i class=" icon-shopping-cart"></i></button>
									</div>
								</div>
							<hr class="soft" />
							<h4>库存还剩{{ iteminfo[0].stock }}件</h4>
							<form class="form-horizontal qtyFrm pull-right">
								<div class="control-group" v-for="(itemattr,index) in iteminfo">
									<label class="control-label"><span>{{ itemattr.attrname }}</span></label>
									<label class="radio" v-for="(attr,attrIndex) in itemattr.attrList">
										<span>{{attr.attrvalue}}</span>
										<input type="radio" :value="attr.rate" v-bind:name="itemattr.attrname"
											@change="changePriceAndImg(index,attrIndex)">
									</label>
								</div>
							</form>
							<hr class="soft clr" />
							<h4>商品简介：</h4>
							<p>
								{{ item.description }}
							</p>
							<a class="btn btn-small pull-right" href="#detail">了解更多</a>
							<br class="clr" />
							<a href="#" name="detail"></a>
							<hr class="soft" />
						</div>

						<div class="span9">
							<ul id="productDetail" class="nav nav-tabs">
								<li><a href="#comments" data-toggle="tab">商品评论</a></li>
								<li class="active"><a href="#home" data-toggle="tab">商品详情</a></li>
								<li><a href="#profile" data-toggle="tab">{{ item.shopname }}</a></li>

							</ul>
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane fade" id="comments">
									<h4>用户评价<small class="pull-right">{{"综合评分:" + stars}}</small></h4>
									<div>
										<div v-for="comment in comments" class="well">
											<h4>{{comment.username}}<small class="pull-right">{{"评分: " +
													comment.star}}</small></h4>
											<p>{{comment.content}}</p>
										</div>
									</div>
									<!-- <h5>Manufacturer's Description </h5>
					<p>
					With a generous 18x Fujinon optical zoom lens, the S2950 really packs a punch, especially when matched with its 14 megapixel sensor, large 3.0" LCD screen and 720p HD (30fps) movie capture.
					</p>
	
					<h5>Electric powered Fujinon 18x zoom lens</h5>
					<p>
					The S2950 sports an impressive 28mm – 504mm* high precision Fujinon optical zoom lens. Simple to operate with an electric powered zoom lever, the huge zoom range means that you can capture all the detail, even when you're at a considerable distance away. You can even operate the zoom during video shooting. Unlike a bulky D-SLR, bridge cameras allow you great versatility of zoom, without the hassle of carrying a bag of lenses.
					</p>
					<h5>Impressive panoramas</h5>
					<p>
					With its easy to use Panoramic shooting mode you can get creative on the S2950, however basic your skills, and rest assured that you will not risk shooting uneven landscapes or shaky horizons. The camera enables you to take three successive shots with a helpful tool which automatically releases the shutter once the images are fully aligned to seamlessly stitch the shots together in-camera. It's so easy and the results are impressive.
					</p>
	
					<h5>Sharp, clear shots</h5>
					<p>
					Even at the longest zoom settings or in the most challenging of lighting conditions, the S2950 is able to produce crisp, clean results. With its mechanically stabilised 1/2 3", 14 megapixel CCD sensor, and high ISO sensitivity settings, Fujifilm's Dual Image Stabilisation technology combines to reduce the blurring effects of both hand-shake and subject movement to provide superb pictures.
					</p> -->
								</div>
								<div class="tab-pane fade active in" id="home">
									<h4>商品详情</h4>
									<table class="table table-bordered">
										<tbody>
											<tr class="techSpecRow">
												<th colspan="2">商品信息</th>
											</tr>
											<tr class="techSpecRow">
												<td class="techSpecTD1">商品编号</td>
												<td class="techSpecTD2">{{ item.id }}</td>
											</tr>
											<tr class="techSpecRow">
												<td class="techSpecTD1">销售店铺 </td>
												<td class="techSpecTD2">{{ item.shopname }}</td>
											</tr>
											<tr class="techSpecRow">
												<td class="techSpecTD1">库存量</td>
												<td class="techSpecTD2">{{ item.stock }}</td>
											</tr>
											<tr class="techSpecRow">
												<td class="techSpecTD1">商品描述</td>
												<td class="techSpecTD2">{{ item.description }}</td>
											</tr>
											<tr class="techSpecRow">
												<td class="techSpecTD1">好评率</td>
												<td class="techSpecTD2">{{ item.star==0.0?'暂无评分':item.star }}</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="tab-pane fade" id="profile">
									<div id="myTab" class="pull-right">
										<a href="#listView" data-toggle="tab" @click="toListView()"><span id="listSpan"
												class="btn btn-large"><i class="icon-list"></i></span></a>
										<a href="#blockView" data-toggle="tab" @click="toBlockView()"><span
												id="blockSpan" class="btn btn-large btn-primary"><i
													class="icon-th-large"></i></span></a>
									</div>
									<br class="clr" />
									<hr class="soft" />
									<div class="tab-content">
										<div class="tab-pane" id="listView">
											<div v-for="product in storeItems">
												<div class="row">
													<div class="span2">
														<img v-bind:src="product.src" alt="" />
													</div>
													<div class="span4">
														<h3>新品！</h3>
														<hr class="soft" />
														<h5>{{ product.description }}</h5>
														<p>
														</p>
														<a class="btn btn-small pull-right"
															:href="'product_details.html?itemid='+product.id">查看详情</a>
														<br class="clr" />
													</div>
													<div class="span3 alignR">
															<h3>{{ product.price.toFixed(2) }}元</h3>
															<!-- <label class="checkbox">
	<input type="checkbox">  Adds product to compair
</label><br/> -->

															<button @click="addToCartSImple(product.id)"
																class="btn btn-large btn-primary"> 添加购物车 <i
																	class=" icon-shopping-cart"></i></button>
															<a :href="'product_details.html?itemid='+product.id"
																class="btn btn-large"><i class="icon-zoom-in"></i></a>

													</div>
												</div>
												<hr class="soft" />
											</div>
										</div>
										<div class="tab-pane  active" id="blockView">
											<ul class="thumbnails">
												<li class="span3" v-for="product in storeItems">
													<div class="thumbnail">
														<a :href="'product_details.html?itemid='+product.id"><img
																v-bind:src="product.src" style="height: 300px;"
																alt="" /></a>
														<div class="caption">
															<p style="white-space: nowrap;overflow: hidden;text-emphasis: ellipsis"
																:title="product.description">
																{{ product.description }}
															</p>
															<h4 style="text-align:center"><a class="btn"
																	:href="'/view/product_details.html?itemid='+product.id">
																	<i class="icon-zoom-in"></i></a>
																<button class="btn"
																	@click="addToCartSImple(product.id)">添加<i
																		class="icon-shopping-cart"></i></button>
																<a class="btn btn-primary"
																	:href="'/view/product_details.html?itemid='+product.id">{{
																	product.price.toFixed(2) }}元</a>
															</h4>
														</div>
													</div>
												</li>
											</ul>
											<hr class="soft" />
										</div>
									</div>
									<div class="pagination">
										<ul>
											<li><a href="javascript:void(0)" @click.prevent="backpage()">&lsaquo;</a>
											</li>
											<li v-for="count in pagesequence">
												<a v-if="count === pageid" href="javascript:void(0)">{{count}}</a>
												<a v-else href="javascript:void(0)" @click="toPage(count)">{{count}}</a>
											</li>
											<li><a href="javascript:void(0)" @click.prevent="nextpage()">&rsaquo;</a>
											</li>
										</ul>
									</div>
									<br class="clr">
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- MainBody End ============================= -->
	#include("./common/footer.htm")
</body>

</html>